<script setup lang="ts">
import apiServe from '@/api'
import { toThousands } from '@/utils/number-util'

import VisitTab from './components/VisitTab.vue'

const visits = ref({
  dayVisits: '',
  dayTB: 0,
  weekTB: 0,
  amount: '',
})
const saleroom = ref({
  weekSaleroom: '',
  amount: '',
})
const orderLarge = ref({
  weekLarge: '',
  dayTB: 0,
  weekTB: 0,
  changePercent: 0,
})
const volume = ref({
  weekLarge: '',
  monthTB: 0,
  monthHB: 0,
  amount: '',
})

onMounted(() => {
  apiServe.dashboard.getConsoleInfo().then((res) => {
    visits.value = {
      ...res.visits,
      dayVisits: toThousands(res.visits.dayVisits),
      amount: toThousands(res.visits.amount),
    }
    saleroom.value = {
      ...res.saleroom,
      weekSaleroom: toThousands(res.saleroom.weekSaleroom),
      amount: toThousands(res.saleroom.amount),
    }
    orderLarge.value = {
      ...res.orderLarge,
      weekLarge: toThousands(res.orderLarge.weekLarge),
    }
    volume.value = {
      ...res.volume,
      weekLarge: toThousands(res.volume.weekLarge),
      amount: toThousands(res.volume.amount),
    }
  })
})

const iconList = [
  [
    {
      icon: 'User',
      title: '用户',
      color: '#69c0ff',
    },
    {
      icon: 'DataAnalysis',
      title: '分析',
      color: '#69c0ff',
    },
  ],
  [
    {
      icon: 'ShoppingCart',
      title: '商品',
      color: '#ff9c6e',
    },
    {
      icon: 'ShoppingBag',
      title: '订单',
      color: '#b37feb',
    },
  ],
  [
    {
      icon: 'Wallet',
      title: '票据',
      color: '#ffd666',
    },
    {
      icon: 'Message',
      title: '消息',
      color: '#5cdbd3',
    },
  ],
  [
    {
      icon: 'PriceTag',
      title: '标签',
      color: '#ff85c0',
    },
    {
      icon: 'Setting',
      title: '配置',
      color: '#ffc069',
    },
  ]
]
</script>

<template>
  <div>
    <!-- 数据卡片 -->
    <div class="data_cards">
      <div class="data_card card_1">
        <div class="head">
          <div class="title">访问量</div>
          <div class="unit">日</div>
        </div>
        <div class="main">
          <div class="row_1">
            {{ visits.dayVisits }}
          </div>
          <div class="row_2">
            <div>日同比 {{ visits.dayTB }}%</div>
            <div>周同比 {{ visits.weekTB }}%</div>
          </div>
        </div>
        <div class="foot">
          <div>总访问量：</div>
          <div>{{ visits.amount }}</div>
        </div>
      </div>
      <div class="data_card card_2">
        <div class="head">
          <div class="title">销售额</div>
          <div class="unit">周</div>
        </div>
        <div class="main">
          <div class="row_1">
            ￥{{ saleroom.weekSaleroom }}
          </div>
          <div class="row_2">
            <el-progress
              :percentage="50"
              text-inside
              :stroke-width="16"
            />
          </div>
        </div>
        <div class="foot">
          <div>总销售额：</div>
          <div>￥{{ saleroom.amount }}</div>
        </div>
      </div>
      <div class="data_card card_3">
        <div class="head">
          <div class="title">订单量</div>
          <div class="unit">周</div>
        </div>
        <div class="main">
          <div class="row_1">
            {{ orderLarge.weekLarge }}
          </div>
          <div class="row_2">
            <div>日同比 {{ orderLarge.dayTB }}%</div>
            <div>周同比 {{ orderLarge.weekTB }}%</div>
          </div>
        </div>
        <div class="foot">
          <div>转化率：</div>
          <div>{{ orderLarge.changePercent }}%</div>
        </div>
      </div>
      <div class="data_card card_4">
        <div class="head">
          <div class="title">成交额</div>
          <div class="unit">月</div>
        </div>
        <div class="main">
          <div class="row_1">
            ￥{{ volume.weekLarge }}
          </div>
          <div class="row_2">
            <div>月同比 {{ volume.monthTB }}%</div>
            <div>月环比 {{ volume.monthHB }}%</div>
          </div>
        </div>
        <div class="foot">
          <div>总成交额：</div>
          <div>￥{{ volume.amount }}</div>
        </div>
      </div>
    </div>

    <!-- 图标 -->
    <div class="icon_cards">
      <div
        v-for="(itemGroup, index) in iconList"
        :key="index"
        class="icon_card_group"
      >
        <div
          v-for="item in itemGroup"
          :key="item.title"
          class="icon_card"
        >
          <el-icon
            size="32px"
            :color="item.color"
          >
            <component :is="item.icon" />
          </el-icon>
          <div class="title">{{ item.title }}</div>
        </div>
      </div>
    </div>

    <VisitTab />
  </div>
</template>

<style scoped lang="less">
@import "index.less";
</style>
